<template>
  <!-- 二级路由 -->
  <router-view v-slot="{ Component, route }" class="main-content">
    <transition name="slide-fade">
      <component
        :is="Component"
        :key="route.path"
        v-if="appStore.refreshFlag"
      />
    </transition>
  </router-view>
</template>

<script setup lang="ts">
import useAppStore from '@/store/modules/app'

const appStore = useAppStore()
</script>

<style lang="scss" scoped>
// .slide-fade-enter-active,
// .slide-fade-leave-active {
//   transition:
//     opacity 0.5s ease,
//     transform 0.5s ease;
// }

// .slide-fade-enter-from,
// .slide-fade-leave-to {
//   visibility: hidden;
//   opacity: 0;
//   transform: translateX(10px);
// }

/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
  //   transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>
